class Toast {
    static toasts = [];
    static container = null;
    static offset = 12; // 消息间距

    static show(options) {
        // 初始化容器
        if (!this.container) {
            this.container = document.createElement('div');
            this.container.className = 'toast-container';
            document.body.appendChild(this.container);
        }

        // 处理参数
        const config = {
            message: '',
            type: 'info',
            duration: 3000,
            ...(typeof options === 'string' ? { message: options } : options)
        };

        // 验证参数
        if (!config.message) {
            console.warn('Toast message cannot be empty');
            return null;
        }

        // 创建 Toast 元素
        const toast = document.createElement('div');
        toast.className = `toast toast-${config.type}`;

        // 插入完整的 DOM 结构
        toast.innerHTML = `
            <div class="toast-content">
                <span class="toast-icon">${this.getIcon(config.type)}</span>
                <span class="toast-message">${config.message}</span>
            </div>
        `;

        // 添加到容器
        this.container.appendChild(toast);

        // 强制重绘，确保动画能正确触发
        void toast.offsetHeight;

        // 触发显示动画
        toast.classList.add('show');
        this.updatePositions();

        // 设置自动关闭
        if (config.duration > 0) {
            toast._timeoutId = setTimeout(() => {
                this.close(toast);
            }, config.duration);
        }

        // 保存引用
        this.toasts.push(toast);
        return toast;
    }

    static close(toast) {
        if (!toast || !toast.parentNode) return;

        // 清除定时器
        if (toast._timeoutId) {
            clearTimeout(toast._timeoutId);
            delete toast._timeoutId;
        }

        // 触发隐藏动画
        toast.classList.remove('show');
        toast.classList.add('hide');

        // 动画结束后移除元素
        const onAnimationEnd = () => {
            toast.removeEventListener('animationend', onAnimationEnd);
            if (toast.parentNode) {
                toast.remove();
            }
            this.toasts = this.toasts.filter(t => t !== toast);
            this.updatePositions();
        };

        toast.addEventListener('animationend', onAnimationEnd);
    }

    static updatePositions() {
        let totalHeight = 0;
        this.toasts.forEach(toast => {
            if (toast.parentNode && !toast.classList.contains('hide')) {
                toast.style.transform = `translateY(${totalHeight}px)`;
                totalHeight += toast.offsetHeight + this.offset;
            }
        });
    }

    static getIcon(type) {
        // 完整的 SVG 图标定义
        const icons = {
            success: `
                <svg viewBox="0 0 1024 1024" class="toast-svg" width="18" height="18">
                    <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384l-99.52-99.584a38.4 38.4 0 0 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 0 0-54.272-54.336L456.192 600.384z"/>
                </svg>
            `,
            error: `
                <svg viewBox="0 0 1024 1024" class="toast-svg" width="18" height="18">
                    <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z"/>
                </svg>
            `,
            warning: `
                <svg viewBox="0 0 1024 1024" class="toast-svg" width="18" height="18">
                    <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 192a58.432 58.432 0 0 0-58.24 63.744l23.36 256.384a35.072 35.072 0 0 0 69.76 0l23.296-256.384A58.432 58.432 0 0 0 512 256zm0 512a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4z"/>
                </svg>
            `,
            info: `
                <svg viewBox="0 0 1024 1024" class="toast-svg" width="18" height="18">
                    <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 192a58.432 58.432 0 0 0-58.24 63.744l23.36 256.384a35.072 35.072 0 0 0 69.76 0l23.296-256.384A58.432 58.432 0 0 0 512 256zm0 512a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4z"/>
                </svg>
            `
        };
        return icons[type] || icons.info;
    }

    static closeAll() {
        this.toasts.slice().forEach(toast => this.close(toast));
    }
}

// 导出完整的方法
export default {
    show: (options) => Toast.show(options),
    success: (message, duration = 3000) => Toast.show({ message, type: 'success', duration }),
    error: (message, duration = 3000) => Toast.show({ message, type: 'error', duration }),
    warning: (message, duration = 3000) => Toast.show({ message, type: 'warning', duration }),
    info: (message, duration = 3000) => Toast.show({ message, type: 'info', duration }),
    close: (toast) => Toast.close(toast),
    closeAll: () => Toast.closeAll()
};